<template>
	<view class="list">
		<button class="mini-btn" type="primary" size="mini" @click="show = true">新增</button>


		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">模板标签</uni-th>
				<uni-th align="center">模板值</uni-th>
				<uni-th align="center">操作</uni-th>

			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item, index) in list" :key="item.id">
				<uni-td align="center">{{ item.name }}</uni-td>
				<uni-td align="center">{{ item.value }}</uni-td>
				<uni-td align="center" style="color:red" @click="handleDelete(item)">删除</uni-td>
			</uni-tr>
		</uni-table>

		<up-modal title="新增模板" :show="show" @confirm="confirm" ref="uModal" showCancelButton @cancel="show = false">
			<template #default>
				<uni-forms ref="valiForm" :modelValue="model" label-position="top" style="width:100%">
					<uni-forms-item label="模板标签" name="name" required>
						<uni-easyinput v-model="model.name" placeholder="请输入模板标签" />
					</uni-forms-item>
					<uni-forms-item label="模板值" name="value" required>
						<uni-easyinput v-model="model.value" placeholder="请输入模板值" />
					</uni-forms-item>
				</uni-forms>
			</template>
		</up-modal>
	</view>
</template>

<script>
	import {
		getPersonalTemplateList,
		delPersonalTemplate,
		addPersonalTemplate
	} from '@/api/app.js'

	export default {
		data() {
			return {
				show: false,
				list: [],
				model: {
					name: "",
					value: "",
					memberId: ""
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '模板名称不能为空'
						}]
					},
					value: {
						rules: [{
							required: true,
							errorMessage: '模板值不能为空'
						}]
					},
				},
			}
		},
		onLoad() {
			const id = uni.getStorageSync('id')
			this.getPersonalTemplateList(id)
			this.model.memberId = id
		},
		methods: {
			// 获取列表
			async getPersonalTemplateList(id) {
				const res = await getPersonalTemplateList({
					id
				})
				this.list = res.data
			},
			// 删除
			handleDelete(item) {
				uni.showModal({
					title: '提示',
					content: '是否删除此模板？',
					success: async (res) => {
						console.log(res);
						if (res.confirm) {
							const resp = await delPersonalTemplate(item)
							this.getPersonalTemplateList(this.model.memberId)
						}
					}
				})
			},
			// 新增
			confirm() {
				if (!this.model.name) return uni.showToast({
					icon: 'none',
					title: '请输入模板标签'
				})
				if (!this.model.value) return uni.showToast({
					icon: 'none',
					title: '请输入模板值'
				})

				addPersonalTemplate(this.model).then(res => {
					if (res.code) {
						this.getPersonalTemplateList(this.model.memberId)
						this.model.name = ''
						this.model.value = ''
						this.show = false
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding: 20rpx 0;

		.mini-btn {
			margin: 0 20rpx 10rpx;
		}


	}
</style>